<template>
  <div class="number-select" v-if="!getIsPhone">
    <play-instruction :instruction="instruction"></play-instruction>
    <lottery-dice-only 
      :item="getCurrentLotteryState[0]"
      @click='handleUpdateData'
      >
    </lottery-dice-only>
    <box-with-position-no-odds
      class="row-wrapper-1"
      :item="getCurrentLotteryState[1]"
      @click='handleUpdateData'
    ></box-with-position-no-odds>
  </div>
  <div v-else class="number-select-phone">
    <lottery-dice-only-phone 
      class="row-wrapper-0"
      :item="getCurrentLotteryState[0]"
      @click='handleUpdateData'
      >
    </lottery-dice-only-phone>
    <box-with-position-no-odds-phone
      class="row-wrapper-1"
      :item="getCurrentLotteryState[1]"
      @click='handleUpdateData'
    ></box-with-position-no-odds-phone>
  </div>
</template>

<script>
import LotteryDiceOnly from '@/components/lottery-type/common/lottery-dice-only'
import LotteryDiceOnlyPhone from '@/components/lottery-type/common/lottery-dice-only-phone'
import BoxWithPositionNoOdds from '@/components/lottery-type/common/box-with-position-no-odds'
import BoxWithPositionNoOddsPhone from '@/components/lottery-type/common/box-with-position-no-odds-phone'
import PlayInstruction from '@/components/play-instruction/play-instruction'
import { boxWithCleanerMixin } from '@/assets/js/mixin.js'
export default {
  mixins: [boxWithCleanerMixin],
  components: {
    PlayInstruction,
    LotteryDiceOnly,
    LotteryDiceOnlyPhone,
    BoxWithPositionNoOdds,
    BoxWithPositionNoOddsPhone
  },
  data() {
    return {
      instruction: '三同号',
    }
  }
}
</script>

<style lang="stylus" scoped>
  .row-wrapper-1 >>> .select-row 
    justify-content flex-start
    align-items center
    .box-wrapper 
      height 36px
      .box 
        height 36px
  @media screen and (max-width 750px)
    .row-wrapper-0 >>> .select-row 
      display block


    
</style>